<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义事件与子向父传值</title>
</head>

<body>
    <template id="temp">
        <div>
            <button @click="handleClick(-1)">-</button>
            {{num}}
            <button @click="handleClick(1)">+</button>
        </div>
    </template>
    <ul>
        <li>$emit("事件名",参数)：触发自定义事件。</li>
        <li>v-on:事件名="函数"：绑定事件处理函数</li>
    </ul>
    <main id="app">
        <p>父组件值：{{num}}</p>
        <!-- 处理事件，绑定事件函数（此时没有使用()填写实际参数），子组件触发事件所传的参数，会在事件处理函数第一个参数给过来 -->
        <div>子组件1：<my-com></my-com>
        </div>
        <div>子组件2：<my-com></my-com>
        </div>
    </main>
</body>
<script src="../vue.js"></script>
<script>

    let vue = new Vue();
    Vue.prototype.$bus = vue;



    new Vue({
        el: "#app",
        data() {
            return {
                num: 0
            }
        },
        methods: {
            handleChange(v) {
                this.num += v;
            },
        },
        components: {
            "my-com": {
                data() {
                    return {
                        num: 0
                    }
                },
                methods: {
                    handleClick(v) {
                        this.num += v;
                        // 触发numchange自定义事件，同时传递参数（参数可以是任意数据类型）
                        vue.$bus.$emit("numchange", v)
                    }
                },
                template: "#temp",
            }
        }
    })

    vue.$bus.$on("numchange",function(e) {
        console.log("父组件.e = ",e);
    })
</script>

</html>